<template>
  <div class="new-list">
    <ul v-if="newsListData.length !== 0">
      <li
        class="news-list-item"
        v-for="(item) in newsListData"
        :key="item.id"
        @click="newsClick(item.id)"
      >
        <div class="news-header">
          <div
            class="news-title"
            :class="{'clicked-news':item.isclick === true}"
            @click="goDetails(item.id)"
          >{{item.title}}</div>
          <div class="news-tag">
            <img
              :src="item.type == '热点信息' ? require('../../assets/images/hotMessage/hot-ico.png') 
              : item.type == '政策法规' ? require('../../assets/images/hotMessage/scales-ico.png') 
              : require('../../assets/images/hotMessage/cycle-ico.png')"
            />
            <span
              :style="{'color': item.type == '热点信息' ? '#f33636': item.type == '政策法规' ? '#ffa700' : '#1eaef1'}"
            >{{item.type}}</span>
          </div>
        </div>
        <div class="news-source">
          <a-tooltip>
            <template slot="title">新闻内容或标题最初始的描述或出处</template>
            {{item.type == "热点信息" ? '本体：' : '机构：'}}
            <span>{{item.sitename}}</span>
          </a-tooltip>
          <a-tooltip>
            <template slot="title">最初始新闻与相似新闻的条数之和</template>
            聚合度：
            <span>52</span>
          </a-tooltip>
          <span>2020-07-30 08:10:56</span>
        </div>
        <div class="news-introduce">
          <div v-if="item.imgs!==''" class="img-box">
            <img :src="item.imgs" alt />
            <p class="news-overview">{{item.content}}</p>
          </div>
          <p v-else class="news-overview" style="width:100%">{{item.content}}</p>
        </div>
      </li>
    </ul>
    <div class="empty" v-else>
      <a-empty></a-empty>
    </div>
  </div>
</template>

<script>
import { newsClick } from "@/api/networkHotspot";
import {mapMutations} from "vuex";
export default {
  props: {
    newsList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    ...mapMutations({
      setBackbtn: "SET_BACKBTN",
    }),
    goDetails(id) {
      this.$router.push({
        path: `/console/configuration/messageDetail/defaultMessage`,
        query: {
          id: id,
        },
      });
      this.setBackbtn(true)
    },
    newsClick(id) {
      // newsClick(id)
      //   .then((res) => {
      //     console.log(res);
      //   })
      //   .catch((err) => {
      //     this.$message.destroy();
      //     this.$message.error(err);
      //   });
    },
  },
  data() {
    return {
      newsListData: [],
    };
  },
  watch: {
    newsList: {
      handler(newV) {
        this.newsListData = newV;
      },
      deep: true,
    },
  },
  mounted() {
    this.newsListData = this.newsList;
  },
};
</script>

<style lang="stylus" scoped>
.empty {
  margin-top: 20px;
}

.new-list {
  .news-list-item {
    padding: 24px 0px;
    border-bottom: 1px solid #ececec;
    margin-right: 12px;

    .news-header {
      width: 100%;
      overflow: hidden;

      .news-title.clicked-news {
        color: #999;
      }

      .news-title.clicked-news:hover {
        text-decoration: none;
        color: #999;
      }

      .news-title {
        width calc(100% - 110px)
        float: left;
        font-size: 18px;
        color: #333333;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        font-weight: 600;
        cursor: pointer;
      }

      .news-tag {
        width: 90px;
        margin-left: 20px;
        float: right;
        overflow: hidden;
        text-align center
        span {
          font-size: 12px;
          font-weight: 600;
          margin-left: 8px;
        }
      }

      .news-title:hover {
        color: #144598;
      }
    }

    .news-source {
      display: table;
      width: 100%;
      font-size: 14px;
      color: #656b90;
      cursor: pointer;
      margin: 10px 0px;

      span {
        margin-right: 20px;
      }
    }

    .news-introduce {
      .img-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      img {
        width: 170px;
        height: 95px;
      }

      .news-overview {
        font-size: 15px;
        color: #575757;
        line-height: 1.5;
        width: calc(100% - 195px);
        margin: 0;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>